import { ScrollView, StyleSheet, Text, View, Dimensions, Image } from 'react-native'
import React, { useEffect } from 'react'

const addTeatch = (props: any) => {
    useEffect(() => {

    }, [])
    return (
        <View style={styles.content}>
            <Text style={styles.content_header}>热门讲师</Text>
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                {props.teach.map((item: any, index: number) => {
                    return (
                        <View style={styles.item} key={index}>
                            <View style={styles.image}>
                                <Image source={{ uri: item.img }}
                                    style={styles.image_Img}></Image>
                            </View>
                            <View style={styles.item_text}>
                                <Text style={styles.text}>
                                    <Text>
                                        {item.mingname}
                                    </Text>
                                    <Text style={{ marginLeft: 15 }}>
                                        {item.job}
                                    </Text>
                                </Text>
                                <Text style={styles.text}>
                                    {item.hospital}{item.department}
                                </Text>
                                <Text style={styles.text}>
                                    {item.num}已学
                                </Text>
                            </View>
                        </View>
                    )
                })}
            </ScrollView>
        </View >
    )
}

export default addTeatch

const styles = StyleSheet.create({
    content: {
        width: Dimensions.get("window").width,
        padding: 20,
    },
    content_header: {
        width: '100%',
        height: 40,
        // backgroundColor: 'white',
        lineHeight: 40,
        color: '#000',
        fontSize: 16,
        fontWeight: 'bold'
    },
    item: {
        width: 120,
        height: 150,
        marginHorizontal: 10,
        backgroundColor: 'white',
        borderRadius: 10,
        marginTop: 20,
        boxSizing: 'border-box',
    },
    image: {
        width: '100%',
        height: 80,
        textAlign: 'center',
    },
    image_Img: {
        width: '60%',
        height: '100%',
        marginLeft: '20%',
        boxSizing: 'border-box',
    },
    item_text: {
        width: '100%',
        height: 70,
        textAlign: 'center',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-around',
        alignItems: 'center'

    },
    text: {
        color: '#000',
        fontSize: 10,
    },
})